<template>
  <div class="wra-cen">
    <div class="main">
      <div class="commentA pin-editor-dialog pin-editor">
        <div class="editor-body">
          <div class="contentA">
            <div class="editor-content editor">
              <div class="auth-card">
                <el-input
                  class="rich-editor empty"
                  type="textarea"
                  v-model="addCloen"
                  placeholder="快和掘友一起分享新鲜事！告诉你个小秘密，发布沸点时添加圈子和话题会被更多掘友看到哦～"
                ></el-input>
              </div>
            </div>
            <div class="topicwrapper">
              <span>
                <div class="new_topic">
                  <span class="iconfont icon-tubiaozhizuomoban_quanzi"></span>
                  请选择圈子>
                </div>
              </span>
            </div>
            <span class="word-counter count"> 0/1000</span>
            <div class="photos" v-if="imageUrl">
              <div class="pic-item" v-for="(item, index) in imageUrl" :key="index">
                <img style="width: 80px; height: 80px" :src="item" class="avatar" />
                <span class="closeBtn" @click="handleDelPic(index)">X</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="toolbar editor-toolbar">
            <div class="tool">
              <div class="emoji-container picker">
                <div class="emoji-box link-pickerA">
                  <V3Emoji @click-emoji="appendText">
                    <span class="iconfont icon-biaoqing"></span>
                    <span class="emoji">表情</span>
                  </V3Emoji>
                </div>
                <div class="picker"></div>
              </div>
              <div class="file-picker picker active link-pickerA">
                <span class="iconfont icon-tupian-xianxing"></span>
                <span>
                  <el-upload
                    class="avatar-uploader"
                    :on-change="change"
                    :limit="3"
                    name="img"
                    action="http://api_devss.wanxikeji.cn/api/savePic/"
                    :show-file-list="false"
                    :on-success="
                      (response) => {
                        imageUrl.push('http://api_devss.wanxikeji.cn/' + response.data)
                      }
                    "
                    :before-upload="beforeAvatarUpload"
                  >
                    <span>图片</span>
                  </el-upload>
                </span>
              </div>
              <div class="link-picker picker link-pickerA">
                <span class="iconfont icon-lianjie"></span>
                <span>链接</span>
              </div>
              <div class="select active link-pickerA">
                <span class="iconfont icon-huati"></span>
                <span>话题</span>
              </div>
            </div>
            <div class="submit">
              <button @click="addDiscuss">发布</button>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="textarea">
            <textarea ref="textareaRef" v-model="content" class="my-textarea" :rows="rows"/>
            <div>
              <span class="release">
                <div class="sele">
                  <i class="iconfont icon-tubiaozhizuomoban_quanzi"></i>
                  请选择圈子&gt;
                </div>
              </span>
              <span class="size">27/1000</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="toolbar">
            <div class="toolbar-qur">
              <div class="picker">
                <el-col v-for="(item,index) in pickerData" :key="index">
                  <i class="iconfont">{{item.unicode}}</i>
                  <span>{{item.picker}}</span>
                </el-col>
              </div>
              <div class="submit">
                <button class="active">发布</button>
              </div>
            </div>
            <div></div>
          </div>
        </div> -->
    </div>
    <!-- <el-skeleton :rows="5" animated v-if="skeletonBlooern"/> -->
    <div class="discuss">
      <ul>
        <li v-for="item in pinsArr" :key="item.article_id">
          <div class="synopsis">
            <div class="avatar">
              <div class="ava">
                <div class="avatar-pic">
                  <el-popover placement="top-start" :width="200" trigger="hover">
                    <template #reference>
                      <el-avatar :size="50" :src="state.circleUrl" />
                    </template>
                    <template #default>
                      <div class="default">
                        <div class="defa">
                          <div>
                            <el-avatar :size="60" :src="state.circleUrl" style="margin-bottom: 8px" />
                          </div>
                          <div class="de-use">
                            <div>
                              <a href="#">{{ item.nick_name }}</a>
                            </div>
                            <div class="jian">
                              <a href="#" v-for="(i, index2) in item.tags" :key="i.tag_id"
                                >{{ i.tag_name }} <i v-if="index2 !== item.tags.length - 1">·</i></a
                              >
                            </div>
                          </div>
                        </div>
                        <div class="attention">
                          <button>关注</button>
                        </div>
                        <div class="fans">
                          <div class="fans-box">
                            <div class="fans-num">
                              <a href="#">123</a>
                            </div>
                            <div class="momo">
                              <a href="#">关注</a>
                            </div>
                          </div>
                          <div>
                            <div class="fans-num">
                              <a href="#">123</a>
                            </div>
                            <div class="momo">
                              <a href="#">粉丝</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                </div>
                <div class="avatar-user">
                  <div class="avatar-user-name">
                    <a href="#">{{ item.nick_name }}</a>
                  </div>
                  <div class="avatar-time">
                    <a href="#" v-for="(i, index2) in item.tags" :key="i.tag_id">{{ i.tag_name }} <i v-if="index2 !== item.tags.length - 1">·</i></a>
                    <a href="#">{{ item.created_at }}</a>
                  </div>
                </div>
              </div>
              <div class="icons">
                <el-dropdown>
                  <i class="iconfont icon-tubiaozhizuomoban_quanzi"></i>
                  <template #dropdown>
                    <el-dropdown-menu class="dorp">
                      <el-dropdown-item>
                        <i class="iconfont icon-yiguanzhugongyingshang"></i>
                        屏蔽作者：{{ item.nick_name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div class="conent">
              <div class="conent-nei" :class="{ close: item.isClose }">
                <div v-html="item.info"></div>
              </div>
              <div>
                <div v-if="item.isOver" @click="changeStatus(index)" class="textStatus">
                  <span>{{ item.textStatus }}</span>
                </div>
              </div>
            </div>
            <div class="imgPic" v-if="item.pic != '[]'">
              <div class="img-box" v-for="(items, index) in item.pic" :key="index">
                <el-image :src="items" :preview-src-list="ites" fit="cover" class="img-img" />
              </div>
            </div>
            <div class="sduoo" v-if="item.hotText">
              <div class="hot-ser">
                <div class="hot-pic">
                  <div>
                    <i class="iconfont icon-biaoqing"></i>
                  </div>
                  <div>{{ item.reviewNmu }}赞</div>
                </div>
                <div class="hot-text">
                  {{ item.hotText }}
                </div>
              </div>
            </div>
            <div class="sduoo" v-if="item.type">
              <a href="#">
                <i class="iconfont icon-tubiaozhizuomoban_quanzi"></i>
                <span>{{ item.type }} &nbsp; &gt;</span>
              </a>
            </div>
            <div class="like">
              <div class="action">
                <div>
                  <div class="action-box">
                    <el-popover placement="bottom" trigger="click" width="150">
                      <template #reference>
                        <i class="iconfont icon-zhuanfa"></i>
                        <span>分享</span>
                      </template>
                      <template #default>
                        <div class="share">
                          <div class="share-item">
                            <div class="share-title-box">
                              <i class="iconfont icon-lianjie"></i>
                              <span>复制链接</span>
                            </div>
                          </div>
                          <div class="share-item">
                            <div class="share-title-box">
                              <i class="iconfont icon-lianjie"></i>
                              <span>微博</span>
                            </div>
                          </div>
                          <div class="share-wei">
                            <div class="share-title-box">
                              <i class="iconfont icon-lianjie"></i>
                              <span>微信扫一扫</span>
                            </div>
                          </div>
                          <div class="weixin"></div>
                        </div>
                      </template>
                    </el-popover>
                  </div>
                </div>
                <div class="action-box" @click="btnFunce(item.article_id)">
                  <i class="iconfont icon-pinglun"></i>
                  <span v-if="item.comment">{{ item.comment_num }}</span>
                  <span v-else>评论</span>
                </div>
                <div class="action-box">
                  <i class="iconfont icon-icon"></i>
                  <span v-if="item.like">{{ item.like }}</span>
                  <span v-else>点赞</span>
                </div>
              </div>
              <div class="comment" v-if="funcCOl(item.article_id)">
                <comment-quer :pinsArr="pinsArr"></comment-quer>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, watch, onUnmounted } from 'vue'
import { getPinsList } from '@/api/article.js'
import { publishApi } from '@/api/publish.js'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
import commentQuer from '@/views/pins/components/comment.vue'
const store = useStore()
const { proxy } = getCurrentInstance()
const ites = ref([])
// 头像
const state = reactive({
  circleUrl: '	https://p9-passport.byteacctimg.com/img/mosaic-legacy/3795/3047680722~300x300.image'
})
const pickerData = ref([
  {
    unicode: '\ue600',
    picker: '表情'
  },
  {
    unicode: '\ue8d2',
    picker: '图片'
  },
  {
    unicode: '\ue61c',
    picker: '链接'
  },
  {
    unicode: '\ue8b1',
    picker: '话题'
  }
])

const commentData = ref([
  {
    commName: 'HoMeTown',
    img: '	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg',
    pic: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ff0a2d0c92fad7a035ebfedf03dbfde4.svg',
    commPost: '前端开发 @ 众耳',
    commTime: '2分钟前',
    commConent: '混经验',
    commReve: 1,
    commClos: 0
  },
  {
    commName: 'HoMeTown',
    img: '	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg',
    pic: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ff0a2d0c92fad7a035ebfedf03dbfde4.svg',
    commPost: '前端开发 @ 众耳',
    commTime: '2分钟前',
    commConent: '混经验',
    commReve: 1,
    commClos: 0
  }
])
// 骨架屏
const skeletonBlooern = ref(true)

const userData = ref([
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent:
      '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    img: [
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image'
    ],
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    reviewNmu: 7,
    hotText: '快别说了，感动的眼泪都下来了',
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    share: '分享',
    review: 10,
    like: 31,
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    img: [
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image'
    ],
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    reviewNmu: 7,
    hotText: '快别说了，感动的眼泪都下来了',
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    reviewNmu: 7,
    hotText: '快别说了，感动的眼泪都下来了',
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    img: ['https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fd6193533504b95b839286f3ebea5b8~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp?'],
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    reviewNmu: 7,
    hotText: '快别说了，感动的眼泪都下来了',
    isClose: false,
    isOver: false,
    textStatus: ''
  },
  {
    userName: '大旭旭',
    occupa: '前端 · ',
    time: '18分钟',
    conent: '还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
    img: ['https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fd6193533504b95b839286f3ebea5b8~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp?'],
    circle: '掘友请回答',
    share: '分享',
    review: 10,
    like: 31,
    reviewNmu: 7,
    hotText: '快别说了，感动的眼泪都下来了',
    isClose: false,
    isOver: false,
    textStatus: ''
  }
])

// 图片
const srcList = ref([
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image'
])

// 数据处理
function numConvert(num) {
  if (num >= 10000) {
    return Math.round(num / 1000) / 10 + 'W+'
  } else if (num >= 1000) {
    return Math.round(num / 100) / 10 + 'K+'
  } else {
    return num
  }
}

/* const isClose = ref(false);
const isOver = ref(false);
const textStatus = ref('') */

let i = 5
let status = false
// 动态获取节点
const pinsArr = reactive([])
const pinsData = reactive({
  page: 1,
  size: i,
  tag_id: 0,
  search: '',
  user_id: store.state.user.user_id,
  concern: true,
  type: 2,
  sort: 0
})
const dynamicPins = async () => {
  const { page, size, tag_id, search, user_id, type, sort } = pinsData
  const pinsCl = await getPinsList({
    page,
    size,
    tag_id,
    search,
    user_id,
    type,
    sort
  })
  console.debug(pinsCl, '沸点')
  const { data } = pinsCl.data.data
  data.forEach((item) => {
    item.timeData = proxy.$moment(item.created_at * 1000).format('llll')
    item.created_at = proxy.$moment(item.created_at * 1000).fromNow()
    if (item.pic) {
      if (item.pic.includes('["')) {
        item.pic = JSON.parse(item.pic)
      }
    }
    pinsArr.push(item)
  })

  // console.debug(pinsArr[1].info.length,"数据");
  // 文章展开收起
  /*  const cloLength = pinsArr.map((item,index)=>{
    return data[index].info
  })
  console.debug(cloLength); */

  /*  cloLength.forEach((ele,index) =>{
     if(cloLength > 85){
        pinsArr[index].isOver = true;
        pinsArr[index].textStatus = '展开';
        pinsArr[index].isClose = true;
    }
  })  */
}
dynamicPins()

const colne = ref()
const iscc = ref(false)
const btnFunce = (index) => {
  colne.value = index
  iscc.value = !iscc.value
}

// 数据滚动加载
// 滚动加载
let pageSize = 1
const fun = () => {
  let scrollTop = document.documentElement.scrollTop
  let clientHeight = document.documentElement.clientHeight
  let scrollHeight = document.documentElement.scrollHeight
  if (scrollTop + clientHeight > scrollHeight - 200) {
    if (!status) {
      status = true
      i += 5
      setTimeout(() => {
        ++pageSize
        pinsData.page = pageSize
        dynamicPins()
        status = false
      }, 1000)
    }
  }
}
onMounted(() => {
  window.addEventListener('scroll', fun)
})
onUnmounted(() => {
  window.addEventListener('scroll', fun)
})

const funcCOl = (clonId) => {
  // console.debug(clonId,'拿到的id');
  if ((colne.value = clonId && iscc.value)) {
    return true
  } else {
    return false
  }
}

// 图片
const imageUrl = ref([])
const del = (i) => {
  imageUrl.value.splice(i, 1)
}
function beforeAvatarUpload(file) {}
const change = (a, b) => {
  if (b.length == 3) {
    ElMessage({
      message: '最大上传3张',
      type: 'warning'
    })
  }
}

// 发布沸点帖子
const addCloen = ref('')

// 监听
watch(
  () => addCloen.value,
  (newValue) => {
    if (newValue) {
      // console.debug(newValue);
      document.querySelector('.submit button').style.cursor = 'pointer'
      document.querySelector('.submit button').style.opacity = '1'
    }
  }
)

const addDiscuss = async () => {
  /* if(addCloen.value = ''){
    ElMessage({
        message: '请输入内容',
        type: 'warning',
      })
  }else{ */
  const pinsAddcl = await publishApi({
    token: localStorage.getItem('token'),
    info: addCloen.value,
    tags_name: [2],
    type: 2,
    pic: JSON.stringify(imageUrl.value)
  })
  if (pinsAddcl.data.code == 2000) {
    ;(imageUrl.value = []), (addCloen.value = '')
    ElMessage({
      message: '新增成功',
      type: 'suc、cess'
    })
    dynamicPins()
  }
}

// 文章展开收起

const changeStatus = (index) => {
  if (pinsArr[index].textStatus === '展开') {
    pinsArr[index].textStatus = '收起'
    pinsArr[index].isClose = false
  } else if (pinsArr[index].textStatus === '收起') {
    pinsArr[index].textStatus = '展开'
    pinsArr[index].isClose = true
  }
}

// 表情
const appendText = (emoji) => {
  let emojiCL = addCloen.value
  addCloen.value = emojiCL + emoji
}
/* 删除图片 */
const handleDelPic = (index) => {
  imageUrl.value.splice(index, 1)
}
</script>

<style scoped>
@import '@/styles/pins/centre.css';
.photos {
  display: flex;
}
.photos .pic-item {
  position: relative;
  margin: 0 5px;
  border: 1px solid #e6e6e6;
}
.photos .closeBtn {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.photos .closeBtn:hover {
  color: #409eff;
  transform: scale(1.3);
  transition: all 0.2;
}
</style>
